<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom: 20px">
        <span>{{stationTitle}}</span>
        <span>通道：{{cameraId}}    </span>
        <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="primary" @click="getVideoSrc">搜索</el-button>
        <el-button type="primary" @click="autoVideoSrc">模拟报警</el-button>
        <el-button type="success" :disabled="!downFlag">
          <a class="download" :disabled="!downFlag" :href='downUrl' download=""  title="下载">下载</a>
        </el-button>
        <el-button type="primary" @click="isDeviceOnline">视频流截图</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14" :offset="4">
        <video id="myVideo" class="video-js vjs-default-skin">
          <source src="http://129.211.130.22:10001/hls/34020000001110000851_0200000851/34020000001110000851_0200000851_live.m3u8" type="application/x-mpegURL">
        </video>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import moment from 'moment'
import download from 'downloadjs'
window.imgIntervalFlag = null
export default {
  name: 'videoItem',
  data () {
    return {
      stationTitle: '修文电站',
      cameraId: '34020000001110000851',
      time: [],
      videoSrc: '',
      downUrl: '',
      intervalId: '',
      layer: null
    }
  },
  mounted () {
    this.playerVideo('myVideo')
    this.imgInterval()
  },
  methods: {
    // 视频播放
    playerVideo (id) {
      this.layer = this.$video(id, {
        controls: true,
        autoplay: false,
        muted: true
      }, function onPlayerReady () {
        this.play()
        this.on('ended', function () {
          console.log('Awww...over so soon?!')
        })
      })
      this.layer.src(this.videoSrc)
    },
    // 通道快照
    channelsNap () {
      this.$axios.get('/api/v1/device/channelsnap', {
        params: {
          serial: this.cameraId,
          realtime: true,
          encode: true
        }
      })
        .then(response => {
          const imgName = moment(new Date()).format('YYYY-MM-DD-HH-mm-ss')
          download(response, `${imgName}.jpg`, 'image/jpg')
        })
    },
    // 查询设备是否在线
    isDeviceOnline () {
      this.$axios.get('/api/v1/device/info', {
        params: {
          serial: this.cameraId
        }
      })
        .then(response => {
          this.deviceOnline = response.Online
          if (this.deviceOnline) {
            this.channelsNap()
          } else {
            this.imgTimeout()
          }
        })
    },

    // 定时拍照
    fixedTime () {
      console.log('-----定时器执行-------')
      console.log(moment(new Date()).get('minute'))
      console.log('未清除时', window.imgIntervalFlag)
      if (moment(new Date()).get('minute') === 18) {
        console.log('清除时', window.imgIntervalFlag)
        clearInterval(window.imgIntervalFlag)
        this.isDeviceOnline()
      }
    },
    imgInterval () {
      window.imgIntervalFlag = setInterval(this.fixedTime, 10000)
    },
    // 定时拍照
    imgTimeout () {
      console.log('设备是否在线轮询')
      setTimeout(this.isDeviceOnline(), 10000)
    },
    // 视频回放
    getVideoSrc () {
      const stime = moment(this.time[0]).format('YYYY-MM-DDTHH:mm:ss')
      const etime = moment(this.time[1]).format('YYYY-MM-DDTHH:mm:ss')
      this.$axios.get('/api/v1/playback/start', {
        params: {
          serial: this.cameraId,
          starttime: stime,
          endtime: etime
        }
      })
        .then(response => {
          this.videoSrc = response.HLS
          this.getDownStream()
          this.playerVideo('myVideo')
        })
    },
    autoVideoSrc () {
      this.$axios.get('/api/v1/playback/start', {
        params: {
          serial: this.cameraId,
          starttime: moment('2020-05-08T14:31:11').subtract(100, 'seconds').format('YYYY-MM-DDTHH:mm:ss'),
          endtime: moment('2020-05-08T14:31:11').format('YYYY-MM-DDTHH:mm:ss')
        }
      })
        .then(response => {
          this.videoSrc = response.HLS
          this.getDownStream()
          this.playerVideo('myVideo')
        })
    },
    getDownStream () {
      const stime = moment(this.time[0]).format('YYYY-MM-DDTHH:mm:ss')
      const etime = moment(this.time[1]).format('YYYY-MM-DDTHH:mm:ss')
      this.$axios.get('/api/v1/playback/start', {
        params: {
          serial: this.cameraId,
          starttime: stime,
          endtime: etime,
          download: true
        }
      })
        .then(response => {
          this.getDownUrl(response.StreamID)
        })
    },
    getDownUrl (id) {
      this.$axios.get('/api/v1/playback/streaminfo', {
        params: {
          streamid: id
        }
      })
        .then(response => {
          this.downUrl = response.PlaybackFileURL
        })
    }

  },
  computed: {
    downFlag: function () {
      return this.time.length === 2
    }
  },
  destroyed () {
    this.layer.dispose()
    window.imgIntervalFlag = null
  }
}
</script>

<style lang="less">
  #myVideo {
    height: 500px;
    width: 800px;
  }
</style>
